<script setup lang="ts">
import { getUserProfile } from '@/api/user'
import { useUserStore } from '@/store/user'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

const userStore = useUserStore()
onShow(async () => {
  const res = await getUserProfile()
  userStore.setUserInfo(res)
})

// 用户信息
const userInfo = computed(() => (
  {
    id: userStore.userInfo.id || '0',
    nickname: userStore.userInfo.nickname || '未登录',
    avatar: '/static/avatar.jpg',
    publishedCount: 0,
    borrowedCount: 0,
    favoriteCount: 99,
  }
))

function goToAddress() {
  uni.navigateTo({
    url: '/pages/user/address/index',
  })
}
// 跳转到编辑资料
function goToEditProfile() {
  // 跳转到编辑个人资料页面
  uni.navigateTo({
    url: '/pages/user/edit-profile/index',
  })
}

// 跳转到我的发布
function goToPublished() {
  uni.navigateTo({
    url: '/pages/user/published/index',
  })
}

// 跳转到我的帖子
function goToMyPost() {
  uni.navigateTo({
    url: '/pages/user/posts/index',
  })
}

// 跳转到我的借阅
function goToBorrowed() {
  uni.navigateTo({
    url: '/pages/user/borrowed/index',
  })
}

// 跳转到我的收藏
function goToFavorites() {
  uni.navigateTo({
    url: '/pages/user/favorites/index',
  })
}

// 跳转到我的点赞
function goToLikes() {
  uni.navigateTo({
    url: '/pages/user/likes/index',
  })
}

// 跳转到我的评论
function goToComments() {
  uni.navigateTo({
    url: '/pages/user/comments/index',
  })
}

// 跳转到设置
function goToSettings() {
  uni.navigateTo({
    url: '/pages/settings/index',
  })
}

// 跳转到帮助中心
function goToHelp() {
  uni.navigateTo({
    url: '/pages/help/index',
  })
}

// 跳转到关于我们
function goToAbout() {
  uni.navigateTo({
    url: '/pages/about/index',
  })
}
</script>

<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info" @click="goToEditProfile">
      <view class="avatar-wrap">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
      </view>
      <view class="info">
        <view class="nickname">
          {{ userInfo.nickname }}
        </view>
        <view class="id">
          ID: {{ userInfo.id }}
        </view>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats">
      <view class="stat-item" @click="goToPublished">
        <text class="num">
          {{ userInfo.publishedCount }}
        </text>
        <text class="label">
          已发布
        </text>
      </view>
      <view class="stat-item" @click="goToBorrowed">
        <text class="num">
          {{ userInfo.borrowedCount }}
        </text>
        <text class="label">
          借阅中
        </text>
      </view>
      <view class="stat-item" @click="goToFavorites">
        <text class="num">
          {{ userInfo.favoriteCount }}
        </text>
        <text class="label">
          收藏
        </text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-group">
        <view class="menu-item" @click="goToMyPost">
          <view class="item-left">
            <text class="iconfont icon-publish" />
            <text class="label">
              我的帖子
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="menu-item" @click="goToComments">
          <view class="item-left">
            <text class="iconfont icon-borrow" />
            <text class="label">
              我的评论
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="menu-item" @click="goToAddress">
          <view class="item-left">
            <text class="iconfont icon-borrow" />
            <text class="label">
              我的地址
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="menu-item" @click="goToLikes">
          <view class="item-left">
            <text class="iconfont icon-favorite" />
            <text class="label">
              我的点赞
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>
      </view>

      <view class="menu-group">
        <view class="menu-item" @click="goToSettings">
          <view class="item-left">
            <text class="iconfont icon-settings" />
            <text class="label">
              设置
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="menu-item" @click="goToHelp">
          <view class="item-left">
            <text class="iconfont icon-help" />
            <text class="label">
              帮助中心
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>

        <view class="menu-item" @click="goToAbout">
          <view class="item-left">
            <text class="iconfont icon-info" />
            <text class="label">
              关于我们
            </text>
          </view>
          <text class="iconfont icon-arrow-right" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}

.user-info {
  position: relative;
  height: 300rpx;
  background: #4caf50;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;

  .avatar-wrap {
    position: relative;
    margin-right: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
    }

    .edit-btn {
      position: absolute;
      right: -10rpx;
      bottom: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 24rpx;
        color: #4caf50;
      }
    }
  }

  .info {
    color: #fff;

    .nickname {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .id {
      font-size: 24rpx;
      opacity: 0.8;
    }
  }
}

.stats {
  display: flex;
  background: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;

  .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .num {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.menu-list {
  .menu-group {
    background: #fff;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100rpx;
      padding: 0 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .item-left {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 40rpx;
          color: #4caf50;
          margin-right: 20rpx;
        }

        .label {
          font-size: 28rpx;
          color: #333;
        }
      }

      .icon-arrow-right {
        font-size: 32rpx;
        color: #999;
      }
    }
  }
}
</style>
